<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" aria-labelledby="createOrEditModal" class="modal fade"
    tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="kt-portlet__head-tools row" style="margin-left:15px;margin-top:30px;">
                <div class="col-2">
                    <a id="aaa" href="" target="_blank"> </a>
                    <label>{{l('rfidCode')}}</label>
                    <div class="form-group kt-form__group align-items-center">
                        <div class="input-group">
                            <input [(ngModel)]="filter" (keydown.enter)="getList()" name="filter" autoFocus
                                class="form-control kt-input" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-2">
                    <div class="form-group kt-form__group align-items-center">
                        <label>&nbsp;</label>
                        <div class="input-group">
                            <button type="button" class="btn btn-primary" [buttonBusy]="primengTableHelper.isLoading"
                                (click)="getList()">
                                <i class="la la-refresh"></i>
                                {{l("search")}}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="col-4">
                    <input id="generateURLSpecial1212" style="width:10px;opacity:0;" readonly />
                </div>
                <div class="col-2">
                    <label>&nbsp;</label>
                    <div class="input-group">
                        <button class="btn btn-primary" (click)="generateAll()" *ngIf="skuId">
                            <i class="la la-refresh"></i>{{l('generateQrcode')}}
                        </button>
                    </div>
                </div>
                <div class="col-2">
                    <label>&nbsp;</label>
                    <div class="input-group">
                        <button class="btn btn-primary" (click)="create()">
                            <i class="fa fa-plus"></i>{{l('createSkuRfid')}}
                        </button>
                    </div>
                </div>



                <button type="button" class="close" (click)="close()" aria-label="Close"
                    style="position:absolute;top:20px;right:30px;font-size:2rem;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="kt-content" style="padding-top:0 !important;">
                <div class="kt-portlet kt-portlet--mobile" style="margin-bottom:0;">
                    <div class="kt-portlet__body">
                        <div class="row align-items-center">
                            <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                <p-table #dataTable (onLazyLoad)="getList($event)" [value]="primengTableHelper.records"
                                    [rows]="primengTableHelper.defaultRecordsCountPerPage" [paginator]="false"
                                    [lazy]="false" [responsive]="primengTableHelper.isResponsive" [(selection)]="rfidList">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th>{{l('Actions')}}</th>
                                            <th style="width: 5.0em">
                                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                            </th>
                                            <th style="width:5%;">{{l('RecordId')}}</th>
                                            <th>{{l('rfidCode')}} </th>
                                            <th style="width:25%;">sku{{l('name')}} </th>
                                            <th>{{l('storeName')}} </th>
                                            <th>{{l('buyTime')}} </th>
                                            <th>{{l('QRCodeLink')}}</th>
                                            <th>{{l('QRCodePicture')}}</th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record let-i="rowIndex">
                                        <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                            <!-- <td style="width:200px;">
                                                <button *ngIf="record.isPurchased" class="btn btn-sm btn-primary"
                                                    (click)="recoverRfidCode(record,$event)">
                                                    {{l("Recover")}}
                                                </button>
                                                <button *ngIf="!record.isPurchased" class="btn btn-sm btn-primary"
                                                    (click)="generateURL(record)">
                                                    {{l("generateQrcode")}}
                                                </button>

                                                <button class="btn btn-sm btn-primary" (click)="edit(record)">
                                                    {{l('Edit')}}
                                                </button>
                                            </td> -->
                                            <td>
                                                <div class="btn-group dropdown" dropdown normalizePosition>
                                                    <button class="dropdown-toggle btn btn-sm btn-primary"
                                                        data-toggle="dropdown" dropdownToggle aria-haspopup="true"
                                                        aria-expanded="false">
                                                        <i class="fa fa-cog"></i>
                                                        <span class="caret"></span> {{l("Actions")}}
                                                    </button>
                                                    <ul class="dropdown-menu" *dropdownMenu>
                                                        <li *ngIf="record.isPurchased">
                                                            <a class="dropdown-item" (click)="recoverRfidCode(record)">{{l("Recover")}}</a>
                                                        </li>
                                                        <li *ngIf="!record.isPurchased">
                                                            <a class="dropdown-item" (click)="generateURL(record)">{{l("generateQrcode")}}</a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item" (click)="edit(record)">{{l("Edit")}}</a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item" (click)="delete(record)">{{l("Delete")}}</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                            <td>
                                                <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                            </td>
                                            <td style="width:5%"> {{transIndex(i)}}</td>
                                            <td><span>{{record.rfidCode}}</span></td>
                                            <td><span>{{record.sku.title}}</span></td>
                                            <td><span>{{record.storeName}}</span></td>
                                            <td>
                                                <span
                                                    *ngIf="record.purchaseTime">{{record.purchaseTime| date : "yyyy/MM/dd HH:mm"}}</span>
                                                <span *ngIf="!record.purchaseTime"> - </span>
                                            </td>
                                            <td><span>{{record.qrcodeUrl}}</span></td>
                                            <td>
                                                <img *ngIf="record.imgUrl" [src]="fixFileUrl(record.imgUrl)" />
                                            </td>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="emptymessage" let-records>
                                        <tr *ngIf="primengTableHelper.records">
                                            <td colspan="7">
                                                <img class="emptymessage"
                                                    src="/assets/common/images/placeholder/productHolder.png" />
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                        (onPageChange)="getList($event)"
                                        [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<createOrEditSkuRfidModal #createOrEditSkuRfidModal (modalSave)="getList()"></createOrEditSkuRfidModal>